<template>
	<div class="c-pagination">
		<el-pagination
			:current-page="page"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="limit"
			:total="total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="pageSizeChangeHandle"
			@current-change="pageCurrentChangeHandle">
		</el-pagination>
	</div>

</template>

<script setup>

const emit = defineEmits(['pageChange'])
const props = defineProps({
	total: {
		type: Number,
		default: 0
	},
	page: {
		type: Number,
		default: 1
	},
	limit: {
		type: Number,
		default: 10
	}
})
// 分页, 每页条数
const pageSizeChangeHandle = (val) => {
	emit("pageChange", 1, val)
}
// 分页, 当前页
const pageCurrentChangeHandle = (val) => {
	emit("pageChange", val, props.limit)
}
</script>

<style scoped>
.c-pagination{
	margin-top: 20px;
	display: flex;
	justify-content: center;
}
</style>
